﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Ohm Nohm's Circuit Adventure</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Andrew Cordar & Shivashankar Halan" />
 
    <!-- CSS -->
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <!-- End CSS -->
 
    <!-- Modernizer -->
    <script src="js/modernizr-2.5.3.min.js"></script>
    <!-- End Modernizer -->

    <!-- JQuery -->
    <script src="js/jquery-1.7.1.min.js"></script>
    <!-- End JQuery -->
    
    <!-- EaselJS -->
    <script src="js/easeljs/utils/UID.js"></script>
    <script src="js/easeljs/display/SpriteSheet.js"></script>
    <script src="js/easeljs/utils/SpriteSheetUtils.js"></script>
    <script src="js/easeljs/display/Shadow.js"></script>
    <script src="js/easeljs/geom/Matrix2D.js"></script>
    <script src="js/easeljs/events/MouseEvent.js"></script>
    <script src="js/easeljs/display/DisplayObject.js"></script>
    <script src="js/easeljs/display/Container.js"></script>
    <script src="js/easeljs/display/Stage.js"></script>
    <script src="js/easeljs/display/Graphics.js"></script>
    <script src="js/easeljs/display/Shape.js"></script>
    <script src="js/easeljs/display/Bitmap.js"></script>
    <script src="js/easeljs/display/BitmapAnimation.js"></script>
    <script src="js/easeljs/utils/Ticker.js"></script>
    <script src="js/easeljs/geom/Rectangle.js"></script>
    <script src="js/easeljs/geom/Point.js"></script>
    <!-- End EaselJS -->
    
    <!-- Custom JS Classes for Circuit Objects -->
    <script src="js/Socket.js"></script>
    <script src="js/Circuit.js"></script>
    <script src="js/EndAppliance.js"></script>
    <script src="js/game/Wire.js"></script>
    <script src="js/game/Battery.js"></script>
    <script src="js/easeljs/display/Text.js"></script>


    <!-- Game -->
    <script src ="js/game/Wire.js"></script>
    <script src ="js/game/Resistor.js"></script>
    <script src ="js/game/Character.js"></script>
    <script src ="js/game/GoalDevice.js"></script>
    <script src ="js/game/Switch.js"></script>
    <script src ="js/game/Path.js"></script>
    <script src ="js/easeljs/ContentManager.js"></script>
    <script src ="js/game/Map.js"></script>
    <!-- End Game -->

    <script type="text/javascript">
        var stage;

        var startingPoint;
        var endAppliance;
        var circuit;

        //EaselJS Rectangle instance we will use to store the bounds
        //of the Canvas
        var bounds;

        var startingX = 5;
        var canvas;

        var socket;
        var endAppliance;
        var circuit;
        var currentLabel;
        var character;
        var contentManager;
        var menubg;
        var worldbg;
        var curWorld = 0;
        var curLevel;
        var curLvl = 0;
        var map;

        function setupLocalStorage() {
            if(localStorage.getItem('world0') === null) {
                var world0 = {"levels": 9,"requiredstars":0,"scores":[0,0,0,0,0,0,0,0,0],"stars":[0,null,null,null,null,null,null,null,null]};
                localStorage.setItem('world0',JSON.stringify(world0));
            }
            if(localStorage.getItem('world1') === null) {
                var world1 = {"levels": 9,"requiredstars":0,"scores":[0,0,0,0,0,0,0,0,0],"stars":[0,null,null,null,null,null,null,null,null]};
                localStorage.setItem('world1',JSON.stringify(world1));                
            }
            if(localStorage.getItem('world2') === null) {
                var world2 = {"levels": 9,"requiredstars":0,"scores":[0,0,0,0,0,0,0,0,0],"stars":[0,null,null,null,null,null,null,null,null]};
                localStorage.setItem('world2',JSON.stringify(world2));
            }
        }

        function load() {
            canvas = document.getElementById("gameCanvas");
            stage = new Stage(canvas);
            contentManager = new ContentManager(stage,canvas.width,canvas.height);
            contentManager.SetDownloadCompleted(init);
            contentManager.StartDownload();
        }
        //initialize function, called when page loads.
        function init() {
            setupLocalStorage();
            bounds = new Rectangle();
            bounds.width = canvas.width;
            bounds.height = canvas.height;

            menubg = new Bitmap(document.getElementById("menubg"));
            worldbg = new Bitmap(document.getElementById("worldbg"));
            worldbg.alpha = 0.0;
            stage.addChild(menubg);
            stage.update();
            var cvs = document.createElement("canvas");
            cvs.width = 100;
            cvs.height = 63;
            var ctx = cvs.getContext("2d");
            var text = "Play";

            ctx.font = '30px "Fredoka One"';
            ctx.fillStyle = "white";
            ctx.strokeStyle="black";
            ctx.fillText('Play',15,40);
            ctx.strokeText('Play',15,40);
            $("#playText").attr('src',cvs.toDataURL());
            cvs.width = cvs.width;
            ctx.font = '30px "Fredoka One"';
            ctx.fillStyle = "white";
            ctx.strokeStyle="black";
            ctx.fillText('About',5,40);
            ctx.strokeText('About',5,40);
            $("#aboutText").attr('src',cvs.toDataURL());
            cvs.width = cvs.width;
            ctx.font = '30px "Fredoka One"';
            ctx.fillStyle = "white";
            ctx.strokeStyle="black";
            ctx.fillText('Menu',10,40);
            ctx.strokeText('Menu',10,40);
            $("#MainButton").append("<img src='" + cvs.toDataURL() + "'/>");
            cvs.width = cvs.width;
            ctx.font = '30px "Fredoka One"';
            ctx.fillStyle = "white";
            ctx.strokeStyle="black";
            ctx.fillText('Replay',1,40);
            ctx.strokeText('Replay',1,40);
            $("#replayButton").append("<img src='" + cvs.toDataURL() + "'/>");
            cvs.width = cvs.width;
            ctx.font = '30px "Fredoka One"';
            ctx.fillStyle = "white";
            ctx.strokeStyle="black";
            ctx.fillText('Next',10,40);
            ctx.strokeText('Next',10,40);
            $("#nextButton").append("<img src='" + cvs.toDataURL() + "'/>");
            $("#play").click(function() {
                stage.removeAllChildren();
                stage.addChild(menubg);
                stage.update();
                showWorlds();
            });

            $("#about").click(function() {
                alert("You control the character Ohm Nohm, an electron who really wants to impress André-Marie Ampère. Ohm Nohm really likes to get to the device he is powering before any other electron so pleasing Ampere should be no problem for him! However, in order to please Ampere, Ohm Nohm must complete circuits that maximize current. Hopefully, his math skills are sufficient, and he can calculate I = V/R, one of the important formulas in Ohm's Law! Ohm Nohm must also beware of the grumpy resistors that will limit his current! Try to maximize current and collect 3 stars on every level!");
            });

            $("#back").click(function(){
                stage.removeAllChildren();
                stage.addChild(menubg);
                stage.removeChild(worldbg);
                worldbg.alpha = 0;
                stage.update();
                $("#menu").css("display","block");
                $("#worldPanel").css("display","none"); 
            });
            $("#lvlBack").click(function() {
                stage.removeAllChildren();
                stage.addChild(menubg);
                stage.update();
                $("#worldPanel").css("display","block");
                $("#levelPanel").css("display","none");
                var total = getTotalStars();
                var cvs = document.createElement("canvas");
                cvs.width = 200;
                cvs.height = 63;
                var ctx = cvs.getContext("2d");
                ctx.font = '30px "Fredoka One"';
                ctx.fillStyle = "black";
                ctx.strokeStyle="white";
                ctx.fillText('Total: ' + total,60,32);
                ctx.strokeText('Total: '+ total,60,32);
                $("#worldScore img").attr("src",cvs.toDataURL());
            });
            $("#navForward").click(function(){
                if($("#navForward div").hasClass("navDisabled"))
                    return;
                $("#navBack div").removeClass("navDisabled");
                var left = 0;
                switch(curWorld) {
                    case 0:
                        left = -145;
                    break;
                    case 1:
                        left = -745
                    break;
                }
                $("#worlds").css('left',left);
                curWorld++;
                if(curWorld == 2) {
                    $("#navForward div").addClass("navDisabled");
                    return;
                }
            });
            $("#navBack").click(function() {
                if($("#navBack div").hasClass("navDisabled"))
                    return;
                $("#navForward div").removeClass("navDisabled");
                var left = 0;
                switch(curWorld) {
                    case 2:
                        left = -145;
                    break;
                    case 1:
                        left = 455;
                    break;
                }
                $("#worlds").css('left',left);
                curWorld--;
                if(curWorld == 0) {
                    $("#navBack div").addClass("navDisabled");
                    return;
                }
            });

            $("#MainButton").click(function() {
                map.Dispose();
                curLevel = "";    
                curLvl = -1;
                $("#levelPanel").css("display","block");
                $("#lvlOptions").css("display","block");
                $("#levelScore").css("display","block");
                $("#lvlBack").css("display","block");
                $("#results").css("display","none");
                var total = getStarsFor(curWorld);
                var cvs = document.createElement("canvas");
                cvs.width = 200;
                cvs.height = 63;
                var ctx = cvs.getContext("2d");
                ctx.font = '30px "Fredoka One"';
                ctx.fillStyle = "white";
                ctx.strokeStyle="black";
                ctx.fillText(total + "/27",110,32);
                ctx.strokeText(total + "/27",110,32);
                $("#levelScore img").attr("src",cvs.toDataURL());
                var obj = JSON.parse(localStorage.getItem("world"+curWorld));
                var stars = obj.stars;
                for(var i = 0; i < stars.length; i++) {
                    var star = stars[i];
                    if(star != null) {
                        $("#option" + i + " div").css("display","block");
                        $("#option"+i).addClass("open");
                        $("#option"+i).removeClass("locked");
                    } else {
                        $("#option" + i + " div").css("display","none");
                        $("#option"+i).addClass("locked");
                    }
                    switch(star) {
                        case 0: 
                            $("#option"+i).append("<div class='stars0'></div>") 
                            break;
                        case 1:
                            $("#option"+i).append("<div class='stars1'></div>") 
                            break;
                        case 2:
                            $("#option"+i).append("<div class='stars2'></div>") 
                            break;
                        case 3:
                            $("#option"+i).append("<div class='stars3'></div>") 
                            break;
                    }
                }

            });
            $("#replayButton").click(function() {
                map.Dispose();
                $("#levelPanel").css("display","none");
                $("#results").css("display","none");   
                $("#menuTray").css("display","block");
                startGame(curLevel);               
            });
            $("#nextButton").click(function() {
                if(curLvl == 8)
                    return;
                map.Dispose();
                $("#levelPanel").css("display","none");
                $("#results").css("display","none");   
                $("#menuTray").css("display","block");  
                if(curLvl < 8){
                    curLvl++;
                    curLevel = "level"+curWorld+"_"+ curLvl
                    startGame(curLevel);
                } 

            })

            $("#gameRestartButton").click(function() {
                map.Dispose();
                startGame(curLevel);
            });
            $("#gameMenuButton").click(function() {
                map.Dispose();
                curLevel = "";
                $("#menuTray").css("display","none");
                $("#levelPanel").css("display","block");  
                $("#lvlBack").css("display","block"); 
                $("#lvlOptions").css("display","block");
                $("#levelScore").css("display","block");
                var total = getStarsFor(curWorld);
                var cvs = document.createElement("canvas");
                cvs.width = 200;
                cvs.height = 63;
                var ctx = cvs.getContext("2d");
                ctx.font = '30px "Fredoka One"';
                ctx.fillStyle = "white";
                ctx.strokeStyle="black";
                ctx.fillText(total + "/27",110,32);
                ctx.strokeText(total + "/27",110,32);
                $("#levelScore img").attr("src",cvs.toDataURL());
                var obj = JSON.parse(localStorage.getItem("world"+curWorld));
                var stars = obj.stars;
                for(var i = 0; i < stars.length; i++) {
                    var star = stars[i];
                    if(star != null) {
                        $("#option" + i + " div").css("display","block");
                        $("#option"+i).addClass("open");
                        $("#option"+i).removeClass("locked");
                    } else {
                        $("#option" + i + " div").css("display","none");
                        $("#option"+i).addClass("locked");
                    }
                    switch(star) {
                        case 0: 
                            $("#option"+i).append("<div class='stars0'></div>") 
                            break;
                        case 1:
                            $("#option"+i).append("<div class='stars1'></div>") 
                            break;
                        case 2:
                            $("#option"+i).append("<div class='stars2'></div>") 
                            break;
                        case 3:
                            $("#option"+i).append("<div class='stars3'></div>") 
                            break;
                    }
                }             
            });
            $("#world0").click(function() {
                stage.removeAllChildren();
                stage.update();
                var total = getStarsFor(0);
                var cvs = document.createElement("canvas");
                cvs.width = 200;
                cvs.height = 63;
                var ctx = cvs.getContext("2d");
                ctx.font = '30px "Fredoka One"';
                ctx.fillStyle = "white";
                ctx.strokeStyle="black";
                ctx.fillText(total + "/27",110,32);
                ctx.strokeText(total + "/27",110,32);
                $("#worldPanel").css("display","none");
                $("#levelPanel").css("display","block");
                $("#levelScore").css("display","block");
                $("#levelScore img").attr("src",cvs.toDataURL());
                var obj = JSON.parse(localStorage.getItem("world0"));
                var stars = obj.stars;
                for(var i = 0; i < stars.length; i++) {
                    var star = stars[i];
                    if(star != null) {
                        $("#option" + i + " div").css("display","block");
                        $("#option"+i).addClass("open");
                        $("#option"+i).removeClass("locked");
                    } else {
                        $("#option" + i + " div").css("display","none");
                        $("#option"+i).addClass("locked");
                    }
                    switch(star) {
                        case 0: 
                            $("#option"+i).append("<div class='stars0'></div>") 
                            break;
                        case 1:
                            $("#option"+i).append("<div class='stars1'></div>") 
                            break;
                        case 2:
                            $("#option"+i).append("<div class='stars2'></div>") 
                            break;
                        case 3:
                            $("#option"+i).append("<div class='stars3'></div>") 
                            break;
                    }
                }
            });
            $("#world1").click(function() {
                stage.removeAllChildren();
                stage.update();
                var total = getStarsFor(1);
                var cvs = document.createElement("canvas");
                cvs.width = 200;
                cvs.height = 63;
                var ctx = cvs.getContext("2d");
                ctx.font = '30px "Fredoka One"';
                ctx.fillStyle = "white";
                ctx.strokeStyle="black";
                ctx.fillText(total + "/27",110,32);
                ctx.strokeText(total + "/27",110,32);
                $("#worldPanel").css("display","none");
                $("#levelPanel").css("display","block");
                $("#levelScore").css("display","block");
                $("#levelScore img").attr("src",cvs.toDataURL());
                var obj = JSON.parse(localStorage.getItem("world1"));
                var stars = obj.stars;
                for(var i = 0; i < stars.length; i++) {
                    var star = stars[i];
                    if(star != null) {
                        $("#option" + i + " div").css("display","block");
                        $("#option"+i).addClass("open");
                        $("#option"+i).removeClass("locked");
                    } else {
                        $("#option" + i + " div").css("display","none");
                        $("#option"+i).addClass("locked");
                    }
                    switch(star) {
                        case 0: 
                            $("#option"+i).append("<div class='stars0'></div>") 
                            break;
                        case 1:
                            $("#option"+i).append("<div class='stars1'></div>") 
                            break;
                        case 2:
                            $("#option"+i).append("<div class='stars2'></div>") 
                            break;
                        case 3:
                            $("#option"+i).append("<div class='stars3'></div>") 
                            break;
                    }
                }
            });
            $("#world2").click(function() {
                stage.removeAllChildren();
                stage.update();
                var total = getStarsFor(2);
                var cvs = document.createElement("canvas");
                cvs.width = 200;
                cvs.height = 63;
                var ctx = cvs.getContext("2d");
                ctx.font = '30px "Fredoka One"';
                ctx.fillStyle = "white";
                ctx.strokeStyle="black";
                ctx.fillText(total + "/27",110,32);
                ctx.strokeText(total + "/27",110,32);
                $("#worldPanel").css("display","none");
                $("#levelPanel").css("display","block");
                $("#levelScore").css("display","block");
                $("#levelScore img").attr("src",cvs.toDataURL());
                var obj = JSON.parse(localStorage.getItem("world2"));
                var stars = obj.stars;
                for(var i = 0; i < stars.length; i++) {
                    var star = stars[i];
                    if(star != null) {
                        $("#option" + i + " div").css("display","block");
                        $("#option"+i).addClass("open");
                        $("#option"+i).removeClass("locked");
                    } else {
                        $("#option" + i + " div").css("display","none");
                        $("#option"+i).addClass("locked");
                    }
                    switch(star) {
                        case 0: 
                            $("#option"+i).append("<div class='stars0'></div>") 
                            break;
                        case 1:
                            $("#option"+i).append("<div class='stars1'></div>") 
                            break;
                        case 2:
                            $("#option"+i).append("<div class='stars2'></div>") 
                            break;
                        case 3:
                            $("#option"+i).append("<div class='stars3'></div>") 
                            break;
                    }
                }

            });

            $("#option0").click(function() {
                var level = "level"+curWorld+"_0";
                curLevel = level;
                curLvl = 0;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
                /*$("#lvlOptions").css("display","none");
                $("#results").css("display","block");
                $("#lvlBack").css("display","none");
                $("#resultStar1").addClass("star");
                $("#resultStar2").addClass("star");
                $("#resultStar3").addClass("star");*/
               // startGame(level);
            });
            $("#option1").click(function() {
                if($("#option1").hasClass("locked"))
                    return;
                var level = "level"+curWorld+"_1";
                curLevel = level;
                curLvl = 1;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
            });
            $("#option2").click(function() {
                if($("#option2").hasClass("locked"))
                    return;
                var level = "level"+curWorld+"_2";
                curLevel = level;
                curLvl = 2;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
            });
            $("#option3").click(function() {
                if($("#option3").hasClass("locked"))
                    return;
                var level = "level"+curWorld+"_3";
                curLevel = level;
                curLvl = 3;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
            });
            $("#option4").click(function() {
                if($("#option4").hasClass("locked"))
                    return;
                var level = "level"+curWorld+"_4";
                curLevel = level;
                curLvl = 4;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
            });
            $("#option5").click(function() {
                if($("#option5").hasClass("locked"))
                    return;
                var level = "level"+curWorld+"_5";
                curLevel = level;
                curLvl = 5;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
            });
            $("#option6").click(function() {
                if($("#option6").hasClass("locked"))
                    return;
                var level = "level"+curWorld+"_6";
                curLevel = level;
                curLvl = 6;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
            });
            $("#option7").click(function() {
                if($("#option7").hasClass("locked"))
                    return;
                var level = "level"+curWorld+"_7";
                curLevel = level;
                curLvl = 7;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
            });
            $("#option8").click(function() {
                if($("#option8").hasClass("locked"))
                    return;
                var level = "level"+curWorld+"_8";
                curLevel = level;
                curLvl = 8;
                stage.removeAllChildren();
                stage.update();
                $("#levelPanel").css("display","none");
                $("#menuTray").css("display","block");
                startGame(level);
            });     
        }

        function showWorlds() {
            $("#menu").css("display","none");
            $("#world0img").css("display","block");
            $("#worldPanel").css("display","block");
            var total = getTotalStars();
            var cvs = document.createElement("canvas");
            cvs.width = 200;
            cvs.height = 63;
            var ctx = cvs.getContext("2d");
            ctx.font = '30px "Fredoka One"';
            ctx.fillStyle = "black";
            ctx.strokeStyle="white";
            ctx.fillText('Total: ' + total,60,32);
            ctx.strokeText('Total: '+ total,60,32);

            $("#worldScore img").attr("src",cvs.toDataURL());
            cvs.width = cvs.width;
            cvs.width = 400;
            cvs.height = 63;
            ctx.font = '20px "Fredoka One"';
            ctx.fillStyle = "white";
            ctx.strokeStyle="black";
            ctx.fillText('1. Are You Series-ous?',45,32);
            ctx.strokeText('1. Are You Series-ous?',45,32);
            $("#world0 img").attr("src",cvs.toDataURL());
            cvs.width = cvs.width;
            ctx.font = '20px "Fredoka One"';
            ctx.fillStyle = "white";
            ctx.strokeStyle="black";
            ctx.fillText('2. Resistance is Futile!',45,32);
            ctx.strokeText('2. Resistance is Futile!',45,32);
            $("#world1 img").attr("src",cvs.toDataURL());
            cvs.width = cvs.width;
            ctx.font = '20px "Fredoka One"';
            ctx.fillStyle = "white";
            ctx.strokeStyle="black";
            ctx.fillText("3. So Watt?",95,32);
            ctx.strokeText("3. So Watt?",95,32);
            $("#world2 img").attr("src",cvs.toDataURL());
        }
        function startGame(level) {
            map = new Map(stage,contentManager);
            $.getJSON('js/game/levels/'+level + ".json", function(data){
                window.map.loadLevel(data);
                window.map.startLevel();
            });
            //Ticker.addListener(window);

        }


        function getTotalStars() {
            var world0 = JSON.parse(localStorage.getItem("world0"));
            var world1 = JSON.parse(localStorage.getItem("world1"));
            var world2 = JSON.parse(localStorage.getItem("world2"));
            var total = 0;
            console.log(world0);
            for(var i = 0; i < world0.stars.length; i++) {
                var count0 = world0.stars[i];
                var count1 = world1.stars[i];
                var count2 = world2.stars[i];
                console.log(count0);
                if(count0 != null)
                    total += count0;
                if(count1 != null)
                    total += count1;
                if(count2 != null)
                    total += count2;
            }

            return total;
        }

        function getStarsFor(world) {
            var total = 0;
            switch(world) {
                case 0:
                    var world = JSON.parse(localStorage.getItem("world0"));
                    for(var i = 0; i < world.stars.length; i++) {
                        var count = world.stars[i];
                        if(count != null)
                            total += count;
                    }
                    return total;
                case 1:
                    var world = JSON.parse(localStorage.getItem("world1"));
                    for(var i = 0; i < world.stars.length; i++) {
                        var count = world.stars[i];
                        if(count != null)
                            total += count;
                    }
                    return total;
                case 2:
                    var world = JSON.parse(localStorage.getItem("world2"));
                    for(var i = 0; i < world.stars.length; i++) {
                        var count = world.stars[i];
                        if(count != null)
                            total += count;
                    }
                    return total;
            }
        }

        /*function drawSocket(imageURL, x, y, scaleX, scaleY) {
            var socketImg = new Bitmap(imageURL);
            socketImg.x = x;
            socketImg.y = y;
            socketImg.scaleX = scaleX;
            socketImg.scaleY = scaleY;
            var sc = new Shape();
            stage.addChild(sc);
            sc.graphics.setStrokeStyle(4).beginStroke("#444")
		            .moveTo(x, y+40)
		            .lineTo(x + 100, y+40);
            sc.graphics.drawCircle(x + 100, y+40, 5);
            stage.addChild(socketImg);
            var voltageLabel = new Text("Voltage:", "bold 20px Arial", "#000");
            voltageLabel.x = x;
            voltageLabel.y = y - 20;
            voltageLabel.text = "V : "+ socket.voltage;
            stage.addChild(voltageLabel);
        }

        function drawEndAppliance(imageURL, x, y, scaleX, scaleY) {
            var socketImg = new Bitmap(imageURL);
            socketImg.x = x;
            socketImg.y = y;
            socketImg.scaleX = scaleX;
            socketImg.scaleY = scaleY;
            var sc = new Shape();
            stage.addChild(sc);
            sc.graphics.setStrokeStyle(4).beginStroke("#444")
		            .moveTo(x, y + 40)
		            .lineTo(x-100, y + 40);
            sc.graphics.drawCircle(x - 100, y + 40, 5);
            stage.addChild(socketImg);
            var voltageLabel = new Text("Voltage:", "bold 20px Arial", "#000");
            voltageLabel.x = x;
            voltageLabel.y = y - 20;
            voltageLabel.text = "V : " + endAppliance.voltage;
            stage.addChild(voltageLabel);
        }

        function drawCircuit(x, xdash, y, length) {

            var conn1 = new Shape();
            stage.addChild(conn1);
            length = xdash - x - 40;
            conn1.graphics.setStrokeStyle(4).beginStroke("#444")
                    .moveTo(x + 30, y)
                    .lineTo(x, y - 30);
            conn1.onClick = closeCircuit;
            var line = new Shape();
            stage.addChild(line);
            line.graphics.setStrokeStyle(4).beginStroke("#444")
                    .drawCircle(x + 30, y, 5)
                    .moveTo(x + 30, y)
                    .lineTo(x + length, y);
            var conn2 = new Shape();
            stage.addChild(conn2);
            conn2.graphics.setStrokeStyle(4).beginStroke("#444")
                    .moveTo(x + length + 30, y-30)
                    .lineTo(x + length, y)
                    .drawCircle(x + length, y, 5);
            var resistanceLabel = new Text("Resistance:", "bold 20px Arial", "#000");
            resistanceLabel.x = (xdash - x) / 2;
            resistanceLabel.y = y - 20;
            resistanceLabel.text = "Resistance : "+circuit.resistance;
            stage.addChild(resistanceLabel);
        }

        function getCurrent() {
            var current = (socket.voltage - endAppliance.voltage) / circuit.resistance;
            currentLabel = new Text("Current:", "bold 23px Georgia", "#444");
            currentLabel.x = canvas.width / 2;
            currentLabel.y = canvas.height/ 3;
            currentLabel.text = "Current : " + current;
            stage.addChild(currentLabel);
            stage.update();
        }

        function closeCircuit(e) {
            alert(e.target.x);
            alert(e.target.y);
            alert("Clicked on something");
            var X = startingX + 100;
            var Y = canvas.height / 2 + 40;
            var tempY = Y;
                while (tempY < clickedConn.y) {
                    alert("Clicked on somethingggg");
                    tempY++;
                    clickedConn.graphics.setStrokeStyle(4).beginStroke("#444")
                            .moveTo(startingX+130, y)
                            .lineTo(startingX+100, tempY);
                    stage.update();
                }
            }
        */

	</script>

</head>
<body onload="load();">
   <!-- <br /><br />
    <center> <input type="button" value="Connect" onclick="getCurrent();"/></center> -->
    <div id="game">
        <canvas width="1280" height="720" id="gameCanvas"></canvas>
        <div id="shadow"></div>
        <div id="menu" class="panel" style="display: block;">
            <div class="content">
                <div id="logo"></div>
                <div id="menuButtons">
                    <div id="play" class="btn">
                        <img id="playText"></img>
                    </div>
                    <div id="about" class="btn">
                        <img id="aboutText"></img>
                    </div>
                </div>
            </div>
        </div>
        <div id="worldPanel" class="panel" style="display: none;">
            <div id="worldScore"><img src/></div>
            <div id="worlds" style="left:455px;">
                <div id="world0" class="iconBtn boxOption">
                    <div id="world0img" class="iconBtn"><img src/></div>
                </div>
                <div id="world1" class="iconBtn boxOption">
                    <div id="world0img" class="iconBtn"><img src/></div>
                </div>
                <div id="world2" class="iconBtn boxOption">
                    <div id="world0img" class="iconBtn"><img src/></div>
                </div>
            </div>
            <div id="navBack">
                <div class="navDisabled"></div>
            </div>
            <div id="navForward">
                <div class></div>
            </div>
            <div id="back" class="backButton"></div>
        </div>
        <div id="levelPanel" class="panel" style="display:none;">
            <div id="levelScore"><img src/></div>
            <div id="lvlBack" class="backButton"></div>
            <div id="lvlOptions">
                <div id="option0" class="option" style="top: 0px; left:0px;">
                    <div class="txt">
                        <img src="images/one.png"/>
                    </div>
                </div>
                <div id="option1" class="option" style="top: 0px; left:153px;">
                    <div class="txt">
                        <img src="images/two.png"/>
                    </div>
                </div>
                <div id="option2" class="option" style="top: 0px; left:306px;">
                    <div class="txt">
                        <img src="images/three.png"/>
                    </div>
                </div>
                <div id="option3" class="option" style="top: 153px; left:0px;">
                    <div class="txt">
                        <img src="images/four.png"/>
                    </div>
                </div>
                <div id="option4" class="option" style="top: 153px; left:153px;">
                    <div class="txt">
                        <img src="images/five.png"/>
                    </div>
                </div>
                <div id="option5" class="option" style="top: 153px; left:306px;">
                    <div class="txt">
                        <img src="images/six.png"/>
                    </div>
                </div>
                <div id="option6" class="option" style="top: 306px; left:0px;">
                    <div class="txt">
                        <img src="images/seven.png"/>
                    </div>
                </div>
                <div id="option7" class="option" style="top: 306px; left:153px;">
                    <div class="txt">
                        <img src="images/eight.png"/>
                    </div>
                </div>
                <div id="option8" class="option" style="top: 306px; left:306px;">
                    <div class="txt">
                        <img src="images/nine.png"/>
                    </div>
                </div>
            </div>
            <div id="results" style="display: none;">
                <div id="status"></div>
                <div class="starRes">
                    <div id="resultStar1" class></div>
                    <div id="resultStar2" class></div>
                    <div id="resultStar3" class></div>
                </div>
                <div id="formula">
                    <img src/>
                </div>
                <div class="buttonCase">
                    <div id="replayButton" class="smallButton"></div>
                    <div id="MainButton" class="smallButton"></div>
                    <div id="nextButton" class="smallButton"></div>
                </div>
            </div>
        </div>
        <div id="menuTray" style="display: none;"> 
            <div id="gameRestartButton"></div>
            <div id="gameMenuButton"></div>
        </div>
    </div>

    <img id="menubg" src="images/menubg.png" style="display:none"></img>
    <img id="worldbg" src="images/worldbg.png" style="display:none"></img>
</body>
 
</html>